<template>
<!-- 这是楼盘页面 -->
  <div id="floors">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        
          <div class="content_bottom">
            
            <div class="top_text">
                <h1><span>{{$t("category.Floors.title")}}</span></h1>
            </div>
            <div class="bottom_category">
                <ul class="category_ul" >
                    <li class="tuijian" @click="tuijian">{{$t("category.recommend")}}</li>
                    <li class="tuijian">{{$t("category.whole")}}</li>
                    <li class="tuijian" @click="region">地区筛选</li>
                </ul>
                <div class="regionSelection" v-show="regionBool">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="省份" name="province">
                      <el-radio-group v-model="radio1" size="medium" :border="false" v-for="(item, index) in provinceData" :key="index">
                        <el-radio-button :label="item.key">{{item.value}}</el-radio-button>
                      </el-radio-group>
                    </el-tab-pane>
                    <el-tab-pane label="城市" name="city">
                      <el-radio-group v-model="radio2" size="medium" :border="false" v-for="(item, index) in cityData" :key="index">
                        <el-radio-button :label="item.key">{{item.value}}</el-radio-button>
                      </el-radio-group>
                    </el-tab-pane>
                    <el-tab-pane label="县区" name="county">
                      <el-radio-group v-model="radio3" size="medium" :border="false" v-for="(item, index) in countyData" :key="index">
                        <el-radio-button :label="item.key">{{item.value}}</el-radio-button>
                      </el-radio-group>
                    </el-tab-pane>
                  </el-tabs>
                  <el-button type="primary" plain size="medium" style="margin-top:30px;margin-left:20px;" @click="identifyAreas">确认</el-button>
                </div>
                <div class="category_obj">
                    <ul class="bottom_ul">
                        <li v-for="item in regionData" :key="item.id" @click="recommend(item.id)">
                            <img :src="url + item.big_img" alt="">
                            <p>{{item.name}}</p>
                        </li>
                    </ul>
                </div>
                <!-- 分页 -->
                <div class="pagination" v-show="pagBool">
                    <el-pagination
                    background
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="totals">
                    </el-pagination>
                </div>
            </div>
          </div>
        <div id="kind_content">
          <div class="content_top">
            <div class="top_parentBox">
                <video
                    class="index_video_hight"
                    src="../../../public/mp4/0611(18).mp4"
                    loop="loop"
                    muted
                    autoplay="autoplay"
                ></video>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
export default {
  data () {
    return {
      regionBool: false,  //地区是否显示
      provinceData: [], //省
      cityData: [], //市
      countyData: [], //区
      radio1: '', //选择省份
      radio2: '', //选择城市
      radio3: '', //选择县区
      activeName: 'province', //地区切换默认
      regionData: [], //地区推荐数据
      url: "https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/",
      pagBool: false, //分页是否显示
      currentPage: 1, //默认第一页
      pageSize: 9,  //每页显示多少条数据
      totals: 0,   //一共多少条数据
    }
  },
  components: {
    Header,
    Footer
  },
  methods: {
    // 推荐
    tuijian() {
      var _this = this;
      _this.$get('estate/recommend').then((res)=>{
        if(res.code == 200) {
          _this.regionData = res.data;
        }
      })
    },
    // 打开地区选择
    region() {
      var _this = this;
      _this.regionBool = _this.regionBool ? false : true;
      _this.$get('estate/list').then((res)=>{
        if(res.code == 200) {
          // 省
          _this.provinceData = [];
          for (let i in res.data.province_list) {
            let obj = {};
            obj.key = i;
            obj.value = res.data.province_list[i];
            _this.provinceData.push(obj);
          }
          // 市
          let arr2 = [];
          for (let j in res.data.city_list) {
            let obj = {};
            obj.key = j;
            obj.value = res.data.city_list[j];
            arr2.push(obj);
          }
          // 区
          let arr3 = [];
          for (let k in res.data.county_list) {
            let obj = {};
            obj.key = k;
            obj.value = res.data.county_list[k];
            arr3.push(obj);
          }
          _this.$store.commit('region', {provinceStore: _this.provinceData, cityStore: arr2, countyStore: arr3});
        }
      })
    },
    // 地区选择
    handleClick(tab) {
      var _this = this;
      let code1 = _this.radio1.substr(0, 2); //省
      let code2 = _this.radio2.substr(0, 4); //市
      let storeData = _this.$store.state.regionData;  //拿状态管理的地区数据
      let arr = [];
      // 判断
      switch(tab.name) {
          case 'city':
            arr = [];
            if( code1 != _this.radio2.substr(0, 2)) {
              _this.radio2 = '';
            }
            // 判断是否有选择省
            if(code1 != '') {
              // 循环判断省地区编码前两位，和市编码前两位相同的就是同一个省下面的市，添加到数组。
              for (let i = 0; i < storeData.cityStore.length; i++) {
                if(code1 == storeData.cityStore[i].key.substr(0, 2)) {
                  arr.push({'key': storeData.cityStore[i].key, 'value': storeData.cityStore[i].value});
                }
              }
            }
            _this.cityData = arr;
          break;
          case 'county':
            arr = [];
            if( code2 != _this.radio3.substr(0, 4)) {
              _this.radio3 = '';
            }
            // 判断是否有选择市
            if(code2 != '') {
              // 循环判断省地区编码前两位，和市编码前两位相同的就是同一个省下面的市，添加到数组。
              for (let i = 0; i < storeData.countyStore.length; i++) {
                if(code2 == storeData.countyStore[i].key.substr(0, 4)) {
                  arr.push({'key': storeData.countyStore[i].key, 'value': storeData.countyStore[i].value});
                }
              }
            }
            _this.countyData = arr;
          break;
      }
    },
    // 确定地区，获取楼盘数据
    identifyAreas() {
      var _this = this;
      
      if(_this.radio3 != '') {
        _this.regionBool = false;
        _this.$get(`estate/${_this.radio3}`).then((res)=>{
          if(res.code == 200) {
            _this.regionData = res.data;
          }
        })
      }
      
    },
  },
  created () {
    var _this = this;
    _this.$get('estate/recommend').then((res)=>{
      if(res.code == 200) {
        _this.regionData = res.data;
      }
    })
  },
}
</script>

<style lang="less" scoped>
// 布局容器
.el-header {
    background-color: white!important;
    font-size: 0;
}
.el-header, .el-footer {
    color: #333;
    text-align: center;
    height: auto!important;
    padding: 0px;
}
.el-main {
    color: #333;
    padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
    min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}

  .top_text {
    margin: 60px 0px;
    h1 {
      width: 1200px;
      margin: auto;
      text-indent: 3em;
      span {
        font-size: 42px;
        padding-bottom: 5px;
        border-bottom: 2px solid black;
        color: black;
        letter-spacing: 5px;
      }
    }
  }
// 布局容器结束
.content_top {
    margin-bottom: 140px;
  .top_parentBox {
    margin: auto;
    width: 1200px;
    height: 550px;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
.content_bottom {
    width: 65%;
    min-width: 1140px;
    margin: auto;
    .bottom_category{
        background-color: white;
        margin-top: 50px;
        padding: 20px;
        position: relative;
    }
    .bottom_ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
        margin-bottom: 50px;
        li{
            width: 26%;
            margin-top: 50px;
            margin-bottom: 10px;
            transition-duration: 1s;
            
            overflow: hidden;
            img{
            height: 297px;
            width: 100%;
            }
            p {
                height: 60px;
                line-height: 50px;
                padding-top: 10px;
                padding-left: 15px;
                padding-right: 15px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin: 0px;
                font-size: 17px;
            }
            // .ul_p {
            //     margin-bottom: 15px;
            // }
            // span {
            //     color: #E2B972;
            //     display: inline-block;
            //     margin-bottom: 20px;
            //     font-size: 16px;
            // }
        }
        li:hover{
            transform:translateY(-10px);
            transition-duration: 1.5s;
            box-shadow: 0px 8px 12px 3px #4E5454;
        }
    }
    .bottom_ul::after {
        content: '';
        display: block;
        width: 26%;
    }
    // .more {
    //     display: block;
    //     width: 100px;
    //     height: 50px;
    //     line-height: 50px;
    //     text-align: center;
    //     margin: 0 auto;
    //     border: 1px solid #000;
    // }
    // .more:hover {
    //     color: #fff;
    //     background-color: #000;
    // }
}
// 推荐
.tuijian {
    cursor:pointer;
}
// 类别
.category_ul {
    border-bottom: 2px solid #ccc;
    height: 50px;
    width: 100%;
    line-height: 48px;
    display: flex;
    justify-content: left;
    li {
        display: inline-block;
        text-align: center;
        min-width: 110px;
        color: #606266;
        font-size: 16px;
        span {
            font-size: 16px;
        }
    }
}
// 地区筛选
/deep/ .el-radio-button__inner {
  margin: 0px 3px;
  border-radius: 3px !important;
  border: 0px !important;
}
.regionSelection {
  padding: 15px 15px;
  border: 1px solid #555;
  width: 530px;
  position: absolute;
  left: 20px;
  top: 75px;
  background-color: white;
  z-index: 2;
}
/deep/ .el-tabs__header {
  margin-bottom: 0px;
  border-bottom-color: #ccc !important;
  .el-tabs__item {
    border-left-color: #ccc !important;
  }
  .el-tabs__nav {
    border-color: #ccc !important;
  }
}
/deep/ .el-tabs__content {
  border: 1px solid #ccc;
  border-top: 0px;
  padding: 15px;
  min-height: 150px;
}
</style>